<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left;"></div>
  </div>
</template>
<script>
import { reactive, ref, toRefs, onMounted, onBeforeUnmount} from 'vue'
import WangEditor from "wangeditor"
export default {
  name: 'Wangeditor',//编辑器
   props: {
    catchData:Function
  },
  setup(props) {
    const editorElem = ref(null)
    const state = reactive({
       editorContent:'',
    })
    
    let editor
    onMounted(() => {
      editor = new WangEditor(editorElem.valve);
      console.log(editor)
      editor.config.showLinkImg = false
      editor.config.showLinkImgAlt = false
      editor.config.showLinkImgHref = false
      editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 2M
      editor.config.uploadFileName = 'file'
      Object.assign(editor.config, {
        onchange(html) {
          console.log(html)
        },
      })
    editor.create(); // 创建富文本实例
    })
    onBeforeUnmount(() => {
      editor.destroy()
      editor = null
    })
    return {
      ...toRefs(state),
      editorElem,
    }
  }
  
}
</script>



